<template>
  <div class="home-list-item">
      <div class="home-list-box bttn-float bttn-md"
           v-for="(infoItem, infoIndex) in infoList"
           @click="clickItem(infoItem)">
          <div class="list-img">
              <img :src=" ftpUrlImg + infoItem.user.coverPictureUrl" />
          </div>
          <div class="list-detail">
              <h4>
                  <span>{{ infoItem.user.name }}</span>
              </h4>
              <div class="list-xq user-list">
                  <span>{{infoItem.user.age == null ? "未知" : formatAge(infoItem.user.age) }}</span>
                  <el-icon v-if="infoItem.user.sex == 1" :size="20" color="#409EFC"><male /></el-icon>
                  <el-icon v-if="infoItem.user.sex == 2" :size="20" color="#f55e90"><Female /></el-icon>
<!--                  <span>{{ infoItem.user.height }}</span>-->
              </div>
              <div class="list-xq">{{ infoItem.college }}</div>
              <div class="list-tags">
                  <n-space
                  ><!--v-for="labelList in infoList.labelDefaultLists"-->
                      <n-tag v-for="(labelItem,labelIndex) in infoItem.labelDefaultLists" type="success"> {{labelItem.label}} </n-tag>
<!--                      <n-tag type="warning"> 手写的从前 </n-tag>-->
                  </n-space>
              </div>
              <div class="list-attention">
                  <div @click.stop="clickLike(infoItem,infoIndex)">
                    <svg class="icon icon-attention" aria-hidden="true" v-if="infoItem.isLike">
                      <use xlink:href="#icon-cpxihuan"></use>
                    </svg>
<!--                      <img v-if="infoItem.isLike" src="../assets/home/user-dz.png" alt="" />-->
                    <svg class="icon icon-attention" aria-hidden="true" v-if="!infoItem.isLike">
                      <use xlink:href="#icon-cpxihuanxiantiao"></use>
                    </svg>
                      <span>{{ infoItem.likeNum }}</span>
                  </div>
                  <div @click.stop="clickAttention(infoItem,infoIndex)">
<!--                    <el-button v-if="infoItem.isAttention" type="warning" :icon="Close" size="small" circle />-->
<!--                    <el-button v-else type="danger" :icon="Plus" size="small" circle />-->
                    <el-button v-if="!infoItem.isAttention" type="success" size="small">关注</el-button>
                    <el-button v-if="infoItem.isAttention" type="danger" size="small">已关注</el-button>
<!--                    <svg class="icon icon-attention" aria-hidden="true" v-if="infoItem.isAttention">-->
<!--                      <use xlink:href="#icon-yiguanzhu"></use>-->
<!--                    </svg>-->
<!--                    <svg class="icon icon-attention" aria-hidden="true" v-if="!infoItem.isAttention">-->
<!--                      <use xlink:href="#icon-jiaguanzhu"></use>-->
<!--                    </svg>-->
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import { formatAge } from "../../utils/utils";
import {ftpUrlImg} from "@/global/config";
import {useRouter} from "vue-router";
import {Plus, Star,Close} from '@element-plus/icons-vue'
import { ref } from "vue";
export default {
  name: "infoItem",
    methods: {
      formatAge,
        clickItem(e){
            this.router.push({name:"PersonalDetails",params:{id:e.user.id}})
        },
        clickLike(e,i){
          let type = 0;
          if (e.isLike){
              type = 1
              this.infoList[i].likeNum = this.infoList[i].likeNum - 1
          }else {
              this.infoList[i].likeNum = this.infoList[i].likeNum + 1
          }
          this.infoList[i].isLike = !this.infoList[i].isLike
          let params = {
              peerID:e.user.id,
              type:type
          }
          this.$requestCenter.addOrCancelLike(params).then((e)=>{
              console.log(e)
              if (e.code === 20061){
                  if(this.infoList[i].isLike){
                      this.$message.success("点赞成功！")
                  }else {
                      this.$message.warning("取消点赞！")
                  }
              }else {
                  this.$message.error("操作出错！")
                  this.infoList[i].isLike = !this.infoList[i].isLike
                  if (this.infoList[i].isLike){
                      this.infoList[i].likeNum = this.infoList[i].likeNum + 1
                  }else {
                      this.infoList[i].likeNum = this.infoList[i].likeNum - 1
                  }
              }
          })
        },
        //点击关注按钮
        clickAttention(e,i){
            let type = 0;
            if (e.isAttention){
                type = 1
            }
            let params = {
                peerID:e.user.id,
                type:type
            }
            this.infoList[i].isAttention = !this.infoList[i].isAttention
            this.$requestCenter.addOrCancelAttention(params).then((e)=>{
                console.log(e)
                if (e.code === 20061){
                    if (this.infoList[i].isAttention){
                        this.$message.success("成功关注！")
                    }else {
                        this.$message.warning("取关成功！")
                    }
                }else {
                    this.$message.error("操作出错！")
                    this.infoList[i].isAttention = !this.infoList[i].isAttention

                }
            })
        }

    },
    props:{
      infoList:null,
    },
    setup(props){
        const router = useRouter();
      return{
          props,
          router,
          ftpUrlImg:ftpUrlImg,
        Plus, Star,Close

      }
    }
};
</script>

<style lang="less" scoped>
.home-list-item {
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  //justify-content: space-around;
  .home-list-box {
    width: 400px;
    height: 220px;
    display: flex;
    justify-content: space-around;
    padding: 12px 16px;
    border-radius: 4px;
    margin: 14px 20px;
    box-shadow: 1px 1px 4px #dcdcdc;
    .list-img {
      border: 1px solid #dededec3;
    }
    .list-img img {
      width: 180px;
      height: 180px;
    }
    .list-detail {
      padding: 0 10px;
      color: #333;
      min-width: 200px;
      h4 {
        font-size: 18px;
        //margin: 10px 0 4px;
        font-weight: 500;
        margin-bottom: 0 !important;
      }
      .list-xq {
        margin-bottom: 0;
        padding: 2px 0;
        font-size: 16px;
        overflow: hidden;
        el-icon {
          margin: 0 10px;
          img {
            width: 20px;
          }
        }
      }
      .list-tags {
        padding: 6px 0;
      }
      .user-list {
        display: flex;
        align-items: center;
        padding: 6px 0 2px 0;
        span:nth-child(1) {
          padding: 0 10px 0 0;
        }
        span:nth-child(3) {
          padding: 0 0 0 10px;
        }
      }
      .list-attention {
        display: flex;
        align-items: center;
        padding: 2px 0;
        div:nth-child(2) {
          padding-left: 4px;
        }
        span {
          color: #434343;
          font-size: 18px;
          position: relative;
          top: 1px;
          padding: 0 4px;
        }
      }
    }
  }
}

//iconfont
.icon {
  width: 1.5em;
  height: 1.5em;
  //vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.icon-attention{
  width: 1.3em;
  height: 1.3em;
  //vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}


</style>